<template>
  <view class="status-card">
    <!-- 状态指示器 -->
    <view class="status-indicator">
      <view 
        class="status-dot"
        :class="{ 
          'status-running': isRunning,
          'status-stopped': !isRunning,
          'status-pulse': isRunning
        }"
      ></view>
      <text class="status-text">{{ status }}</text>
      <view class="status-countdown" v-if="isRunning">
        <text class="countdown-label">下次刷新</text>
        <text class="countdown-value">{{ countdown }}</text>
      </view>
    </view>

    <!-- 运行状态提示 -->
    <view class="running-tip" v-if="isRunning">
      <text class="tip-icon">💡</text>
      <text class="tip-text">系统运行中，请勿关闭页面</text>
    </view>

    <!-- 统计概览 -->
    <view class="stats-overview" v-if="stats.totalAttempts > 0">
      <view class="overview-grid">
        <view class="overview-item">
          <text class="item-label">总尝试</text>
          <text class="item-value">{{ stats.totalAttempts }}</text>
          <view class="item-trend" v-if="stats.totalAttempts > 0">
            <text class="trend-icon">📈</text>
            <text class="trend-text">持续增长</text>
          </view>
        </view>
        <view class="overview-item">
          <text class="item-label">成功抢夺</text>
          <text class="item-value">{{ stats.successfulPlunders }}</text>
          <view class="item-trend" v-if="stats.successfulPlunders > 0">
            <text class="trend-icon">🎯</text>
            <text class="trend-text">成功率 {{ successRate }}%</text>
          </view>
        </view>
        <view class="overview-item">
          <text class="item-label">总灵石</text>
          <text class="item-value">{{ stats.totalStones.toFixed(1) }}</text>
          <view class="item-trend" v-if="stats.totalStones > 0">
            <text class="trend-icon">💎</text>
            <text class="trend-text">平均 {{ averageStones.toFixed(1) }}/次</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 最近记录 -->
    <view class="recent-records" v-if="stats.records.length > 0">
      <view class="records-header">
        <text class="records-title">最近记录</text>
        <text class="records-count">{{ stats.records.length }} 条</text>
      </view>
      <scroll-view class="records-list" scroll-y>
        <view 
          v-for="(record, index) in recentRecords" 
          :key="index"
          class="record-item"
          :class="{ 'record-new': isNewRecord(index) }"
        >
          <view class="record-time">{{ formatTime(record.timestamp) }}</view>
          <view class="record-content">
            <view class="record-main">
              <text class="record-nickname">{{ record.nickname }}</text>
              <text class="record-stones">+{{ record.stones.toFixed(1) }}</text>
            </view>
            <view class="record-details">
              <text class="record-target">目标ID: {{ record.targetRoleId }}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 停止状态提示 -->
    <view class="stopped-tip" v-if="!isRunning">
      <text class="tip-icon">⏹</text>
      <text class="tip-text">系统已停止，点击启动按钮开始运行</text>
    </view>
  </view>
</template>

<script setup>
import { computed, ref, watch } from 'vue';

const props = defineProps({
  isRunning: {
    type: Boolean,
    required: true
  },
  status: {
    type: String,
    required: true
  },
  countdown: {
    type: String,
    required: true
  },
  stats: {
    type: Object,
    required: true
  }
});

// 计算属性
const successRate = computed(() => {
  if (props.stats.totalAttempts === 0) return '0.00';
  return ((props.stats.successfulPlunders / props.stats.totalAttempts) * 100).toFixed(2);
});

const averageStones = computed(() => {
  if (props.stats.successfulPlunders === 0) return 0;
  return props.stats.totalStones / props.stats.successfulPlunders;
});

// 最近记录（最多显示5条）
const recentRecords = computed(() => {
  return props.stats.records.slice(0, 5);
});

// 新记录标记
const newRecordIndexes = ref(new Set());

// 监听记录变化
watch(() => props.stats.records, (newRecords, oldRecords) => {
  if (newRecords.length > oldRecords.length) {
    // 标记新记录
    for (let i = oldRecords.length; i < newRecords.length; i++) {
      newRecordIndexes.value.add(i);
    }
    
    // 3秒后移除新记录标记
    setTimeout(() => {
      newRecordIndexes.value.clear();
    }, 3000);
  }
}, { deep: true });

// 判断是否为新记录
const isNewRecord = (index) => {
  return newRecordIndexes.value.has(index);
};

// 格式化时间
const formatTime = (timestamp) => {
  if (!timestamp) return '00:00:00';
  const date = new Date(timestamp);
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  return `${hours}:${minutes}:${seconds}`;
};
</script>

<style scoped>
.status-card {
  background-color: white;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 20rpx;
}

.status-dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background-color: #f44336;
}

.status-dot.status-running {
  background-color: #4caf50;
}

.status-dot.status-pulse {
  animation: pulse 2s infinite;
}

.status-text {
  font-size: 28rpx;
  font-weight: 600;
  color: #2c3e50;
}

.status-countdown {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8rpx;
  background-color: #f5f7fa;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
}

.countdown-label {
  font-size: 24rpx;
  color: #909399;
}

.countdown-value {
  font-size: 24rpx;
  font-weight: 600;
  color: #2196f3;
  font-family: monospace;
}

.running-tip {
  display: flex;
  align-items: center;
  gap: 8rpx;
  background-color: #e8f5e9;
  padding: 12rpx 16rpx;
  border-radius: 8rpx;
  margin-bottom: 20rpx;
}

.tip-icon {
  font-size: 28rpx;
}

.tip-text {
  font-size: 24rpx;
  color: #2e7d32;
}

.stats-overview {
  margin-bottom: 20rpx;
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180rpx, 1fr));
  gap: 16rpx;
}

.overview-item {
  background-color: #f8f9fa;
  border-radius: 12rpx;
  padding: 16rpx;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.item-label {
  font-size: 24rpx;
  color: #909399;
}

.item-value {
  font-size: 32rpx;
  font-weight: 600;
  color: #2c3e50;
}

.item-trend {
  display: flex;
  align-items: center;
  gap: 4rpx;
  margin-top: 4rpx;
}

.trend-icon {
  font-size: 24rpx;
}

.trend-text {
  font-size: 22rpx;
  color: #909399;
}

.recent-records {
  background-color: #f8f9fa;
  border-radius: 12rpx;
  padding: 16rpx;
}

.records-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
}

.records-title {
  font-size: 26rpx;
  font-weight: 600;
  color: #2c3e50;
}

.records-count {
  font-size: 24rpx;
  color: #909399;
}

.records-list {
  max-height: 300rpx;
}

.record-item {
  display: flex;
  gap: 16rpx;
  padding: 12rpx;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.3s ease;
}

.record-item:last-child {
  border-bottom: none;
}

.record-item.record-new {
  background-color: #e3f2fd;
  animation: highlight 3s ease-out;
}

.record-time {
  font-size: 24rpx;
  color: #909399;
  font-family: monospace;
  white-space: nowrap;
}

.record-content {
  flex: 1;
}

.record-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4rpx;
}

.record-nickname {
  font-size: 26rpx;
  color: #2c3e50;
}

.record-stones {
  font-size: 26rpx;
  font-weight: 600;
  color: #4caf50;
}

.record-details {
  font-size: 22rpx;
  color: #909399;
}

.stopped-tip {
  display: flex;
  align-items: center;
  gap: 8rpx;
  background-color: #fef0f0;
  padding: 12rpx 16rpx;
  border-radius: 8rpx;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes highlight {
  0% {
    background-color: #e3f2fd;
  }
  100% {
    background-color: transparent;
  }
}

@media screen and (min-width: 768px) {
  .overview-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .records-list {
    max-height: 400rpx;
  }
}
</style> 